<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0061)http://www.wikitude.com/doc/architect_tutorial/tutorial5.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>My ARchitect World</title>

<!-- CSS Styles -->
<style type="text/css">
* {
	margin: 0;
}

html,body {
	height: 100%;
}

#footer {
	height: 4em;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 5px 10px;
	display: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

/* CSS Style for status message at the top of the HUD */
.status {
	border-radius: 2em;
	border: solid 2px #6d6d6d;
	background-color: rgba(256, 193, 0, 0.7);
	color: black;
	text-align: center;
	font-weight: bold;
	position: absolute;
	width: 90%;
	height: 5%;
	left: 5%;
	top: 1%;
}
}
</style>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>


</head>

<body>
	<script>
		// Tutorial code using the ARchitect Javascript library

		// Create new images, which will be loaded right away
		firstImage = new AR.ImageResource("marker1.png", {
			onError : errorLoadingImage
		});
		secondImage = new AR.ImageResource("marker2.png", {
			onError : errorLoadingImage
		});
		thirdImage = new AR.ImageResource("marker3.png", {
			onError : errorLoadingImage
		});

		castleImage = new AR.ImageResource("castle.png", {
			onError : errorLoadingImage
		});

		// current selected object
		var selectedObject = null;

		//variable that keeps the jsonData received from the native app
		var jsonObject;

		//function that gets called when the displayed poi bubble is clicked
		//sends the id of the selected poi to the native app
		function generateOnPoiBubbleClickFunc(id) {
			return function() {
				document.location = "architectsdk://opendetailpage?id=" + id;
			}
		}

		// creates a property animation
		function createOnClickAnimation(imageDrawable) {
			var anim = new AR.PropertyAnimation(imageDrawable, 'scaling', 1.0,
					1.2, 750, new AR.EasingCurve(
							AR.CONST.EASING_CURVE_TYPE.EASE_OUT_ELASTIC, {
								amplitude : 2.0
							}));
			return anim;
		}

		// creates a function for assigning to label's and imageDrawable's onClickTrigger
		function createClickTrigger(id) {
			return function() {
				// hide the bubble
				document.getElementById("footer").style.display = 'block';
				document.getElementById("poiName").innerHTML = jsonObject[id].name;
				document.getElementById("poiDesc").innerHTML = jsonObject[id].description
						.substring(0, 25);
				document.getElementById("footer").onclick = generateOnPoiBubbleClickFunc(id);

				// reset the previous selected poi
				if (selectedObject != null) {
					// reset the property animation
					selectedObject.animation.stop();

					selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
					selectedObject.img.scaling = 1.0;
					selectedObject.poiObj.renderingOrder = 0;
				}

				// set a new select status for the current selected poi
				selectedObject = jsonObject[id];
				selectedObject.arLabel.style.backgroundColor = '#FFFFFFFF';
				selectedObject.poiObj.renderingOrder = 1;

				// start the assigned animation
				selectedObject.animation.start();

				return true;
			}
		}

		//function called from the native app fia callJavascript method
		//receives json-data as string and processes the contained information
		function newData(jsonData) {
			jsonObject = jsonData;
			// 			document.getElementById("statusElement").innerHTML = 'Loading JSON objects';

			for ( var i = 0; i < jsonObject.length; i++) {
				var poidrawables = new Array();
				var label = new AR.Label(jsonObject[i].name, 1.0, {
					offsetY : -1.5,
					triggers : {
						onClick : createClickTrigger(jsonObject[i].id)
					},
					style : {
						textColor : '#FFC100',
						backgroundColor : '#FFFFFF80'
					}
				});

				jsonObject[i].arLabel = label;

				var poiImage;
				if (jsonObject[i].type == 3) {
					poiImage = castleImage
				} else if (jsonObject[i].type == 1) {
					poiImage = firstImage;
				} else if (jsonObject[i].type == 2) {
					poiImage = secondImage;
				} else {
					poiImage = thirdImage;
				}

				var img = new AR.ImageDrawable(poiImage, 2.0, {
					triggers : {
						onClick : createClickTrigger(jsonObject[i].id)
					}
				});

				jsonObject[i].animation = createOnClickAnimation(img);
				jsonObject[i].img = img;

				poidrawables.push(label);
				poidrawables.push(img);
				geoLoc = new AR.GeoLocation(jsonObject[i].Point.latitude,
						jsonObject[i].Point.longitude,
						jsonObject[i].Point.altitude);
				jsonObject[i].poiObj = new AR.GeoObject(geoLoc, {
					drawables : {
						cam : poidrawables
					}
				});
			}

			// 			document.getElementById("statusElement").innerHTML = 'JSON objects loaded';

		}

		// Called if loading of the image fails.
		function errorLoadingImage() {
			// set error message on HUD
			// 			document.getElementById("statusElement").innerHTML = "Unable to load image!";
		}

		// hide bubble and reset the selected poi if nothing was hit by a display click
		AR.context.onScreenClick = function() {
			// hide the bubble
			document.getElementById("footer").style.display = 'none';

			// and reset the current selected poi
			if (selectedObject != null) {
				// reset the property animation
				selectedObject.animation.stop();

				selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
				selectedObject.img.scaling = 1.0;
				selectedObject.poiObj.renderingOrder = 0;
				selectedObject = null;
			}
		}
	</script>


	<!-- Status element at the top of the HUD -->
	<!-- 	<div id="statusElement" class="status"></div> -->
	<br />
	<br />
	<br />
	<div id="footer">
		<h3>
			<span id="poiName"></span>
		</h3>
		Description: <span id="poiDesc"></span><br />
		<p style="text-align: center;">click for more...</p>
	</div>
</body>
</html>